<!--hf_scroll_vertical/hf_scroll_horizontal/hf_scroll_none--><!--生效,可控制界面右侧显示滑动上下/左右或不显示滑动,一般系统会自行判断,但应用主动添加也没问题-->
<!--hf_no_number--><!--生效,某控件不想被标记数字时使用-->
<!--hf_use_description--><!--生效,使用在placeholder中,Cimo不使用也可以,但Hmt需要使用-->
<!--hf_show_text--><!--未生效,目前不经常用-->
<!--hf_persists--><!--未生效,目前用不到-->
<!--hf_make_clickable--><!--未生效,目前用不到-->

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>
        Demo Web App
    </title>
</head>

<!--一个页面中只能使用一次hf_scroll属性,所以想要同时显示上下左右语音命令时,就不要加此hf语法-->
<!--<body id="all_demo" title="hf_scroll_vertical">-->
<body id="all_demo">
<div id="app">
    <div id="container" class="container">
        <div class="row">
            <div class="col-sm-offset-2 col-sm-6">
                <h2>MoziWare Demo</h2>
                <p>注意:此页内容仅展示网页应用如何适配Cimo设备</p>
                <form>
                    <div class="form-group">
                        <p><b>请输入名字(默认对控件标记数字):</b></p>
                        <input type="text"
                               class="form-control"
                               placeholder="开始输入名字"
                               title="hf_use_description|hf_show_text"
                        />
                    </div>
                    <div class="form-group">
                        <p><b>请输入年龄(使用hf语法提示系统,无需对此控件标记数字):</b></p>
                        <input type="text"
                               class="form-control"
                               placeholder="开始输入年龄"
                               title="hf_no_number|hf_use_description|hf_show_text"/>
                    </div>

                    <p><b>你想吃什么(多选)</b></p>
                    <div class="form-group">
                        <input name="checkbox1"
                               type="checkbox"
                               id="checkbox1"
                               title="hf_no_number|hf_make_clickable"/>
                        <label for="checkbox1">冰激凌</label>

                        <input name="checkbox2"
                               type="checkbox"
                               id="checkbox2"
                               title="hf_no_number"/>
                        <label for="checkbox2">爆米花</label>

                        <input name="checkbox3"
                               type="checkbox"
                               id="checkbox3"
                               title="Chocolates"/>
                        <label for="checkbox3">巧克力</label>
                    </div>

                    <p><b>你最喜欢的颜色?</b></p>
                    <div class="form-group">
                        <label>
                            <input type="radio" name="radio1" checked id="None"
                                   title="hf_no_number"/>
                            没有
                        </label>
                        <label>
                            <input type="radio" name="radio2" id="red" title="hf_no_number"/>
                            红色
                        </label>
                        <label>
                            <input type="radio" name="radio3" id="Blue" title="hf_no_number"/>
                            蓝色
                        </label>
                        <label>
                            <input type="radio" name="radio4" id="green" title="hf_no_number"/>
                            绿色
                        </label>
                    </div>
                    <div class="form-group">
                        <p><b>你喜欢做什么?</b></p>
                        <select class="form-control" title="hf_no_number">
                            <option selected>开始选择</option>
                            <option>睡觉</option>
                            <option>吃饭</option>
                            <option>编程</option>
                            <option>睡觉,吃饭和编程</option>
                            <option>不想睡觉</option>
                            <option>不想吃饭</option>
                            <option>不想编程</option>
                            <option>啥也不做</option>
                            <option>啥都做</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <p><b>你的生活中最好的体验是什么?</b></p>
                        <textarea class="form-control" rows="5" placeholder="开始输入内容"
                                  title="hf_no_number|hf_use_description"></textarea>
                    </div>
                    <div class="form-group">
                        <button
                                type="submit"
                                title="hf_no_number">
                            提交
                        </button>
                        <button
                                id="clearForm">
                            清空
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div tabindex="-1" title="hf_no_number">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title"></div>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="form-group">
    <p><textarea  rows="10" cols="50" wrap="off" style="overflow-y:hidden;resize:none" class="form-control"  placeholder="Enter Experiences"
                  title="hf_no_number|hf_use_description">
我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动1,
我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动2,
我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动3,
我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动4,
我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动5,
我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动6,
我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动,我可以左右滑动7,
    </textarea></p>
</div>

</body>
</html>
